<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>DDD</title>
		<script src="../lib/echarts.min.js"></script>
    <script src="../lib/jquery.min.js"></script>
	</head>
	<body>
		<div style="height: 500px"></div>
		<script>
      var mCharts = echarts.init(document.querySelector('div'))
			mCharts.showLoading() // 发送请求前 显示loading
      $.get('../data/test_data.json',function (ret){
        mCharts.hideLoading() // 当服务器获取数据后，隐藏loading
        var axisData = []
        for (let i = 0; i < ret.length; i++) {
          var height = ret[i].height
          var weight = ret[i].weight
          var itemArr = [height,weight]
          axisData.push(itemArr)
        }
        var option = {
          xAxis: {
            type: 'value',
            scale: true,
          },
          yAxis: {
            type: 'value',
            scale: true,
          },
          series: [
            {
              type: 'effectScatter',
              data: axisData,
              symbolSize: function (arg) {
                var weight = arg[1]
                var height = arg[0] / 100
                var bmi = weight / (height * height)
                if (bmi > 28) {
                  return 20
                }
                return 5
              },
            },

          ],
        }
        mCharts.setOption(option)
      })
			
		</script>
	</body>
</html>
